<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mamma</title>

<link rel="shortcut icon" href="../image/icon_mamma.ico">
<link rel="stylesheet" href="../js/jquery-ui-1.11.1.custom/jquery-ui.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script>
<script src="../js/imgLiquid-min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	var size = <s:property value='friendList.size' />;
	if(size > 12){
		$('#list').css('height', ((size-12)*120+600)+'px');
	}
	
	searchMenu('../friends/');
	profileMenu();
	$('div.photo').imgLiquid();
});

function profileMenu() {
	$('div.info').click(function(){
		$('#profileMenu').toggle();	
	});
}

function findFriend(){
	
	$.ajax({
		url: ""
		, type: "POST"
		, dataType: "json"
		, data: {email: email, name: name}
		, success: findList
	});
}

function findList(json){
	
}
</script>
<style type="text/css">
/* all div */
.mainForm {
	margin: 0 auto;
	width: 1024px;
}
.mainHome { background-color: white; box-shadow: 1px 1px 1px lightgray; }
ul li { list-style: none; }
#list{ background-color: white; height: 600px; }
div.result1 {
	height: 120px;
	border: 1px solid lightgray;
	float: left;
	width: 315px;
	background-color: white;
}
div.photo {
	z-index: 10;
	height: 100px;
	width: 100px;
	float: left;
	margin-top: 10px;
	margin-left: 10px;
}
div.photo img {
	max-height: 100px;
	max-width: 100px;
}
div.information {
	z-index: 10;
	height: 100px;
	width: 190px;
	float: left;
	margin-left: 10px;
}
div.button {
	z-index: 10;
	height: 100px;
	width: 130px;
	float: left;
}
button{
	width: 100px;
	height: 25px;
	margin-top: 80px;
	margin-left: -110px;
	position: absolute;
	border: 1px solid white;
	color: white;
	font-weight: bold;
	font-size: 10pt;
	cursor: pointer;
}
button.done {
	background-color: #5CD65C;
	border: 0;
}
button.cancelRequest {
	background-color: red;
	border: 0;
}

#recommend span, #alarm span, #sendRequest span, #finder span {
	margin-left: 30px;
}

span.resultName, span.resultEmail{
	font-size: 11pt;
	font-weight: bold;
}
span.resultNickname, span.resultInputdate{
	color: gray;
	font-size: 10pt;
}
span.resultEmail{
	font-size: 10pt;
}
#title span.title {
	font-size: 25pt;
	margin-top: 20px;
	margin-left: 50px;
	color: gray;
}
#title div {
	float: left;
}
#title input {
	margin-top: -10px;
	margin-left: 700px;
	width: 250px;
	height: 20px;
	border-radius: 3px;
	border: 1px solid #FF5455;
	box-shadow: none;
	padding-left: 5px;
}
#title .searchIcon{
	margin-top: -19px;
	margin-left: 935px;
	position: absolute;
	background-color: #f7f6f6;
	border-left: 1px solid lightgray;
	
	heigth: 30px;
	width: 20px;
	text-align: center;
	
	cursor: pointer;
}
#title .searchIcon .fa-search{
	font-size: 10pt;
	color: gray;
}


#home hr {
	width: 90%;
	color: lightgray;
	border-bottom: 0;
	border: 1px solid #FF5455;
}

		/* footer */
#footer{
	margin: 0 auto;
	word-spacing: 10px;
	color: #FF5459;
	font-size: 9pt;
	width: 1030px;
	background-color: #f7f6f6;
	height: 20px;
	text-align: center;
	padding-top: 80px;
	
	margin-top: 10px;
}

a{ text-decoration: none; color: black; }
a:VISITED{ text-decoration: none; color: black; }
a:LINK{ text-decoration: none; color: black; }
</style>
</head>
<body>
<jsp:include page="../account/header.jsp" />

<div id="home">
	<div class="mainForm content mainHome">
		<div id="title">
			<br><br>
			<span class="title"><i class="fa fa-users"></i> 친구</span>
			<div class="kind"></div>
		</div>
		<br><br>
		<hr>
		<br>
		<div id="list">
			<ul>
			<s:iterator value="friendList">
				<li>
					<div class="result1">
						<a href="../member/goHome.action?email=<s:property value="email" />">
							<div class="photo">
								<s:if test="%{savedFile == null}">
									<img src="../image/profile.png">
								</s:if>
								<s:else>
									<img src="../photoData/<s:property value='savedFile' />">
								</s:else>
							</div>
						</a>
						<div class="information">
							<br> <span class="resultName"> <a
								href="../member/goHome.action?email=<s:property value="email" />">
									<s:property value="name" />
							</a>
							</span> <span class="resultNickname">(<s:property value="nickname" />)
							</span> <span class="resultInputdate"><s:property
									value="inputdate" /></span>
						</div>
						<div class="check">
							<button class="done"
								data-email="<s:property value="email" />">
								<i class="fa fa-users"></i> 친구 사이
							</button>
						</div>
					</div>
				</li>
				</s:iterator>
			</ul>
		</div><!-- list -->
		
		
		<div id="footer">
				소개 지원 블로그 관련기사 API 채용정보 공개범위 약관
		</div>
		
	</div>
</div>

</body>
</html>